<!-- 组件弹窗 用于加载组件 不做提示 -->
<template>
  <el-dialog
    v-model="getShow"
    :before-close="handlerCancer"
    :title="data.title || yuDialog.title"
    :width="data.width || yuDialog.width"
    :modal="data.modal || yuDialog.modal"
    :fullscreen="data.fullscreen || yuDialog.fullscreen"
    :lockScroll="data.lockScroll || yuDialog.lockScroll"
    :openDelay="data.openDelay || yuDialog.openDelay"
    :closeDelay="data.closeDelay || yuDialog.closeDelay"
    :closeOnClickModal="data.closeOnClickModal || yuDialog.closeOnClick"
    :closeOnPressEscape="data.closeOnPressEscape || yuDialog.closeOnPress"
    :showClose="data.showClose || yuDialog.showClose"
    :draggable="data.draggable || yuDialog.draggable"
    :center="data.center || yuDialog.center"
    :destroyOnClose="data.destroyOnClose || yuDialog.destroyOnClose"
    @open="open"
    @opened="opened"
    @close="close"
    @closed="closed"
  >
    <div
      class="dialog-style"
      :style="{ '--dialogHeight': dialogHeight }"
      v-if="getShow"
    >
      <slot />
    </div>
    <template #footer v-if="footer">
      <div class="dialog-footer">
        <el-button @click="handlerCancer">取消</el-button>
        <el-button @click="handlerSubmit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import '@/assets/style/yu-dialog.scss';
import yu_Dialog from '@/pub/yu-dialog.js';
import { computed, ref, toRef, onBeforeUpdate, getCurrentInstance } from 'vue';
const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
  footer: {
    type: Boolean,
    default: false,
  },
  isShow: {
    type: Boolean,
    default: false,
  },
});
const yuDialog = yu_Dialog.yu_dialog;
const data = toRef(props, 'data');
const emits = defineEmits([
  'update:isShow',
  'open',
  'opened',
  'close',
  'closed',
]);
onBeforeUpdate(() => {
  //更新数据
  updateStyle();
});
const dialogHeight = ref('');
const updateStyle = () => {
  dialogHeight.value = props.data.height || '60vh';
};

const handlerCancer = () => {
  emits('update:isShow', false);
};
const handlerSubmit = () => {
  // dialog 点击确定按钮之前处理相关业务逻辑
  emits('update:isShow', false);
};

const getShow = computed({
  get: () => props.isShow,
  set: val => {
    emits('update:isShow', val);
  },
});
//打开前
const open = () => {
  emits('open');
};
//打开后
const opened = () => {
  emits('opened');
};
//关闭前
const close = () => {
  emits('close');
};
//关闭后
const closed = () => {
  emits('closed');
};
</script>
<style lang="scss" scoped>
.dialog-style {
  height: var(--dialogHeight);
  min-height: 200px;
}
</style>
